<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue响应式原理</title>
</head>
<body>
  <div id="root">
    <div class="c1">
      <div title="tt1" id="id">{{ name }}</div>
      <div title="tt2">{{ age }}</div>
      <div title="tt3">{{ gender }}</div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
  <script src="./src/watcher.js"></script>
  <script src="./src/Dep.js"></script>
  <script src="./src/vnode.js"></script>
  <script src="./src/compiler.js"></script>
  <script src="./src/FVue.js"></script>
  <script src="./src/initrender.js"></script>
  <script src="./src/initdata.js"></script>
  <script>
    // rollup
    let app = new FVue( {
      el: '#root',
      data: {
        name: '铁蛋',
        age: 24,
        gender: '男',
        father: '父亲',
        children: [
          { name: '金蛋', age: 9, gender: '男' },
          { name: '银弹', age: 6, gender: '女' },
          { name: '铜蛋', age: 3, gender: '男' },
        ],
        a : {
          b: {
            c: 'jim'
          }
        }
      }

    } );

    /*
    *小结：
    * 1、首先我们进行new FVue进行vue的实例化，触发FVue.js文件
    * 2、其次执行this.initData();进行observe将所有的data中数据进行响应化处理，并为每个属性创建自己的Dep实例，用于收集依赖，然后将data中属性挂载映射到vue上
    * 3、其次执行this.mount();（this.render()函数为获取data数据的虚拟dom，目前还未执行），再执行this.mountComponent();
    * 4、此时我们也就进行了实例化watcher了，调用watcher中的get方法，将当前的渲染watcher绑定到Dep.target上
    * 5、再执行watcher的get中this.getter（此处为我们引进来的mount函数，功能是更新我们的this.render(),也就是更新虚拟dom）
    * 6、调用this.getter时，会读取页面中使用到的data中的属性，此时我们会跳到defineProperty中的get中读取相关属性
    *
    * 7、读取data属性的get时，会触发dep.depend进行依赖收集，跳到Dep实例的depend中
    * 8、Dep的depend中会判断 Dep.target 是否有当前watcher，有则为当前属性的Dep实例的subs中存入 依赖当前属性的watcher, 并将当前的Dep存入到当前的watcher中
    * 9、dep与watcher关系（每个属性都有一个自己的dep，里面存放的是依赖这个属性的有哪些watcher;而watcher中则存放了很多的dep,这样他也知道了自己依赖哪些属性）
    *
    * 10、在第6步中我们跳到defineProperty中读取到页面中属性的真实值后，将真实的值与虚拟dom合并，生成带值的虚拟dom,转化为真实dom，进行页面提换，也就完成了界面的更新
    *
    *
    * 数据的修改：
    * 1、属性数据的修改会先读取当前属性的get，进行如上的依赖收集，
    * 2、然后进入到属性的set中执行dep.notify()进行派发更新
    * 3、notify()函数会将依赖它的所有watcher循环，依次调用watcher的update()进行页面的更新
    *
    * */
  </script>
</body>
</html>
